<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background: url(./grid.png);
    }
    #canvas{
      background-color: rgb(255, 192, 203, 0.4);
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script>
    window.onload = function(){
      const canvas = document.getElementById('canvas')
      if(canvas.getContext){
        const ctx = canvas?.getContext('2d')
        console.log('ctx: ', ctx);
        ctx.fillStyle = 'aqua'
        // ---- 矩形方法 ---
        // 1.绘制矩形
        ctx.fillRect(0, 0, 50, 50)
        // 2.绘制矩形边框
        ctx.strokeRect(100, 100, 50, 50)
        // 3.擦除矩形区域
        ctx.clearRect(10, 10, 10, 20)

        // --- 路径方法：绘制直线 ---
        ctx.lineWidth = 5 // 画笔的粗细
        ctx.strokeStyle = 'red' // 画笔的粗细
        ctx.beginPath()
        ctx.moveTo(5, 80) // moveTo(x, y) 移动画笔方法，通常是将画笔移动到一个起始点
        ctx.lineTo(100, 80) // lineTo(x, y) 绘制直线方法
        ctx.moveTo(100, 90) 
        ctx.lineTo(5, 90) 
        ctx.closePath()  // 不是必须的 写上最好 不会出问题
        ctx.stroke() // stroke() 描边，用于将画出来的路径描边

        // --- 路径方法：绘制三角形 ---
        ctx.lineWidth = 1
        ctx.fillStyle = 'purple'
        ctx.beginPath()
        ctx.moveTo(60, 10)
        ctx.lineTo(70, 20)
        ctx.lineTo(50, 20) 
        ctx.closePath() // ！！不闭合的话三角形，stroke描边会没有最后一条边，fill会自动闭合
        ctx.fill() 

        // --- 圆的方法：绘制笑脸 ---
        ctx.strokeStyle = 'red'
        ctx.beginPath()
        // x y R startRad endRad 是否逆时针
        ctx.arc(200, 50, 50, 0, Math.PI * 2, false) // startRad起始弧度为0是以X轴为起点
        ctx.moveTo(193, 35)
        ctx.arc(185, 35, 8, 0, Math.PI * 2, false)
        ctx.moveTo(223, 35)
        ctx.arc(215, 35, 8, 0, Math.PI * 2, false)
        ctx.moveTo(225, 60)
        ctx.arc(200, 60, 25, 0, Math.PI, false)
        // ctx.closePath()
        ctx.stroke()

         // ---- 矩形路径方法 ---
        // 1.绘制矩形
        ctx.beginPath()
        ctx.rect(270, 10, 100, 50)
        ctx.rect(280, 20, 80, 30) // rect中  moveTo会默认将起始点挪到该起点 无需手动修改起始点
        ctx.closePath()
        ctx.strokeStyle = 'purple'
        ctx.stroke()

        // --- 线宽 ---
        ctx.lineWidth = 3
        ctx.beginPath()
        ctx.moveTo(10, 160.5) 
        ctx.lineTo(100, 160.5)
        ctx.closePath()
        ctx.stroke()

        // --- 字体样式 ---
        ctx.font = '30px sen-serif'
        ctx.textAlign = 'center'  // center表示设置的坐标点为字体的中心点 start表示设置的坐标点为字体的起点
        ctx.textBaseline = 'middle' // center表示设置的坐标点所在的X轴作为字体的middle基线的位置（相对字体来说，字体的各种基线是不会变的，只是把例如字体的middle基线移动到X轴的位置）
        ctx.fillText('Ay', 40, 120)

        // --- 图片 ---

        // --- 样式、颜色、端点 ---

        //  --- 形变 ---

        // --- 绘图状态帧 ---
      }
    }
  </script>
</body>
</html>